<template>
  <div class="noselect">
    <div class="goods-category-list">
      <div class="table_div">
        <!-- 表格头部 -->
        <ul class="table_head">
          <li style="width: 60px"></li>
          <li style="flex: 6">分类名称</li>
          <li style="flex: 2">图片</li>
          <li class="center flex2">是否显示</li>
          <li class="center flex2">操作</li>
        </ul>
        <!-- 表格内容 -->
        <ul class="table_body">
          <draggable animation="300" :options="{ forceFallback: true }">
            <li
              v-for="(oneVal, oneKey) in tableData"
              :key="oneKey"
              class="table_one"
            >
              <div class="table_tr">
                <div class="table_td" style="width: 60px">
                  <div class="flex">
                    <div class="table_move">
                      <i class="el-icon-rank"></i>
                    </div>
                    <i
                      v-if="oneVal.children"
                      class="el-icon-plus js-switch"
                    ></i>
                  </div>
                </div>
                <div class="table_td flex6">鲜花绿植</div>
                <div class="table_td flex2">
                  <img
                    class="ns-img-box"
                    src="http://picsum.photos/360/460?random=1"
                  />
                </div>
                <div class="table_td flex2 center">显示</div>
                <div class="table_td flex2 center">
                  <span class="c409 mag-r-10">编辑</span>
                  <span class="c409">删除</span>
                </div>
              </div>
              <template v-if="oneVal.children">
                <div class="table_two">
                  <draggable animation="300" :options="{ forceFallback: true }">
                    <div
                      v-for="(twoVal, twoKey) in oneVal.children"
                      :key="twoKey"
                      class="table_two_div"
                    >
                      <div class="table_tr">
                        <div class="table_td" style="width: 60px"></div>
                        <div class="table_td flex6">
                          <div class="flex">
                            <div class="table_move">
                              <i class="el-icon-rank"></i>
                            </div>
                            <i
                              v-if="twoVal.children"
                              class="el-icon-plus js-switch"
                            ></i>
                            <span>鲜花绿植</span>
                          </div>
                        </div>
                        <div class="table_td flex2">
                          <img
                            class="ns-img-box"
                            src="http://picsum.photos/360/460?random=1"
                          />
                        </div>
                        <div class="table_td flex2 center">显示</div>
                        <div class="table_td flex2 center">
                          <span class="c409 mag-r-10">编辑</span>
                          <span class="c409">删除</span>
                        </div>
                      </div>
                      <template v-if="twoVal.children">
                        <div class="table_three">
                          <draggable
                            animation="300"
                            :options="{ forceFallback: true }"
                          >
                            <div
                              v-for="(treeVal, treeKey) in twoVal.children"
                              :key="treeKey"
                              class="table_tr table_three_tr"
                            >
                              <div class="table_td" style="width: 60px"></div>
                              <div class="table_td flex6">
                                <div class="flex tables_move">
                                  <div class="table_move">
                                    <i class="el-icon-rank"></i>
                                  </div>
                                  <span>鲜花绿植</span>
                                </div>
                              </div>
                              <div class="table_td flex2">
                                <img
                                  class="ns-img-box"
                                  src="http://picsum.photos/360/460?random=1"
                                />
                              </div>
                              <div class="table_td flex2 center">显示</div>
                              <div class="table_td flex2 center">
                                <span class="c409 mag-r-10">编辑</span>
                                <span class="c409">删除</span>
                              </div>
                            </div>
                          </draggable>
                        </div>
                      </template>
                    </div>
                  </draggable>
                </div>
              </template>
            </li>
          </draggable>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'treeDrag',
  components: { draggable },
    data() {
      return {
        num: 0,
        expands: ['3', '31'],
        stateClock: true,
        memoryArray: null, //需要排序的数组
        fatherNum: null,
        tableData: [
          {
            id: 1,
            date: '2016-05-00',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            id: 2,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            id: 3,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [
              {
                id: 31,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                children: [
                  {
                    id: 44,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                  },
                ],
              },
              {
                id: 32,
                date: '2016-05-05',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
              },
            ],
          },
          {
            id: 4,
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
          },
        ],
      }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .table_head {
    display: flex;
    font-weight: bold;
    background-color: #f7f7f7;
  }
  .table_head li:first-child {
    padding-right: 0;
  }
  .table_head li {
    height: 40px;
    line-height: 40px;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    padding: 9px 15px;
    font-size: 14px;
  }
  .table_tr {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    /* width: 96%; */
  }
  .table_tr .table_td:first-child {
    padding-right: 0;
  }
  .table_tr .table_td {
    position: relative;
    padding: 11px 15px 8px;
    min-height: 30px;
    line-height: 33px;
    font-size: 14px;
  }
  .table_move {
    cursor: move;
    margin-right: 10px;
  }
  .js-switch {
    display: inline-block;
    height: 30px;
    width: 30px;
    text-align: center;
    cursor: pointer;
    line-height: 29px;
    font-size: 10px;
  }
  .ns-img-box {
    width: 30px;
    height: 30px;
  }
  .tables_move {
    cursor: move;
    float: left;
    margin-right: 20px;
    padding-left: 70px;
  }
</style>
